import React from 'react'
import style from './index.less'
import {connect} from 'dva';
import {Table, Modal, Button,message} from 'antd';

import MenuList from '../MenuList'

class RoleList extends React.Component {
  state={
    modalShow:false,
  }
  componentDidMount(){
    this.props.dispatch({
			type:`role/getRoles`
		})
  }
  handleModalToggle=()=>{
    this.setState({
      modalShow:!this.state.modalShow,
    })
    this.props.dispatch({
			type:`menu/setState`,
			payload:{
        setupMenus:null,
        checkedKeys:null,
      },
		})
	}
  handleClick=(record)=>{
    _paq.push(['trackEvent','按钮事件','设置菜单',record.roleCode]);
		this.props.dispatch({
			type:`menu/setState`,
			payload:{
        currentRoleCode:record.roleCode,
      },
		})
    this.handleModalToggle()
  }
  handleSetupTheRoleMenu=()=>{
    if(this.props.menu.setupMenus){
      this.props.dispatch({
  			type:`menu/setupTheRoleMenu`,
  			payload:{
  				roleCode:this.props.menu.currentRoleCode,
  				menus:this.props.menu.setupMenus.filter(item=>item!='root').map(item=>({menuCode:item})),
  			},
  		})
    }else{
      message.info('没有任何更改！')
    }

    this.handleModalToggle()
	}

  render() {
		const myProps = {
			dataSource : this.props.role.roles.map((item,i)=>({
				key:i+1,
				roleCode: item.roleCode,
				roleName: item.roleName,
				roleDescription: item.roleDescription,
			})),
			columns : [
				{
					title: '序号',
					dataIndex: 'key',
					key: 'key',
				}, {
					title: '角色名称',
					dataIndex: 'roleName',
					key: 'roleName'
				}, {
					title: '角色描述',
					dataIndex: 'roleDescription',
					key: 'roleDescription'
				}, {
					title: '操作',
					key: 'action',
					className:'action',
					render: (text, record) => (
						<span
							onClick={this.handleClick.bind(this,record)}
							style={{cursor:'pointer',color:'#49a9ee'}}
							>菜单设置</span>
					)
				}
			],
			pagination:false
		}
    return (
			<div className={style.root}>
	      <Table {...myProps}/>
        <Modal title='菜单设置'
          visible={this.state.modalShow}
          onOk={this.handleSetupTheRoleMenu}
          onCancel={this.handleModalToggle}
          className={style.modal}
          >
          {
            this.state.modalShow&&<MenuList />
          }

        </Modal>
	    </div>
    );
  }
}


export default connect(({role,menu}) => ({role,menu}))(RoleList)
